<template>
    <el-row class="main">
        <el-col class="padd20 posa">
            <el-col class="box box-pack-start box-align-center">
                <div class="btn">
                    <el-input placeholder="搜索" style="margin: 0 5px;"  @input="listSchoolTr()" v-model="searchtext"></el-input>
                    <el-upload class="upload-demo" :action="truploadfileurl" :data="upData"
                      :show-file-list="false" multiple  :on-success="success" :before-upload="beforeUpload">
                      <el-button  class="reset-comfirm-btn" @click="">excel导入</el-button>
                    </el-upload>
                    <el-link :href="trmburl" type="primary" style="width: 150px;">下载模板</el-link>
                </div>
            </el-col>
            <el-col class="mt20 tab">
                <el-table :data="trpage.list" stripe :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="300" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="手机号" width="300" align="center"></el-table-column>
                    <el-table-column prop="zgh" label="职工号" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-col class="box box-pack-center box-align-center">
                                <el-button icon="el-icon-delete" @click="handleDeleteTr(scope.row)"></el-button>
                            </el-col>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col class="mt20">
                    <el-pagination @current-change="listSchoolTr" background layout="prev, pager, next" :total="trpage.total"
                       :current-page="trpage.pageNum"  hide-on-single-page></el-pagination>
                </el-col>



            </el-col>
            <el-col class="box box-pack-start box-align-center mt20">
                <span class="label tr">学生信息</span>
                <div class="btn">
                    <el-link :href="stumburl" type="primary">下载模板</el-link>
                    <el-upload class="upload-demo" :action="stuuploadfileurl" :data="upData"
                      :show-file-list="false" multiple  :on-success="success" :before-upload="beforeUpload">
                      <el-button  class="reset-comfirm-btn" @click="">excel导入</el-button>
                    </el-upload>
                </div>
            </el-col>
            <el-col class="mt20 tab">
                <el-table :data="stupage.list" stripe :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="300" align="center"></el-table-column>
                    <el-table-column prop="zy" label="专业" width="300" align="center"></el-table-column>
                    <el-table-column prop="bj" label="班级" width="300" align="center"></el-table-column>
                    <el-table-column prop="xh" label="学号" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-col class="box box-pack-center box-align-center">
                                <el-button icon="el-icon-delete" @click="handleDeleteStu(scope.row)"></el-button>
                            </el-col>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col class="mt20">
                    <el-pagination @current-change="listSchoolStu" background layout="prev, pager, next" :total="stupage.total"
                       :current-page="stupage.pageNum"  hide-on-single-page></el-pagination>
                </el-col>

            </el-col>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                trmburl:'https://yhlyy.oss-cn-beijing.aliyuncs.com/7BF0D54B135A4083A88E1469E2877FF9%E6%95%99%E5%B8%88%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xls?Expires=4785463465&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=fDc1c4AwVERtJV0ilPav4mQdRvM%3D',
                stumburl:'https://yhlyy.oss-cn-beijing.aliyuncs.com/24D8E21359354322A1D5F5A6CC140DCC%E5%AD%A6%E7%94%9F%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xls?Expires=4785463465&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=Pc2QqCfaZ4hJAGzafvlaFskgHBY%3D',
                loginInfo: this.$store.state.loginInfo,
                upData:{schoolid:this.$store.state.loginInfo.user.schoolId},
                truploadfileurl: this.$url.baseURL + "/dteacher/impExcelTr",
                stuuploadfileurl: this.$url.baseURL + "/dstudent/impExcelStu",
                trpage: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                stupage: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                searchtext:''
            };
        },
        mounted() {
            this.listSchoolTr();
            this.listSchoolStu();
        },
        methods: {
            listSchoolTr(pageNum){
                let params = {
                    schoolid: this.loginInfo.user.schoolId,
                    pageNum:pageNum
                };
                this.$api.Admin.schoolTrList(params).then(res => {
                    if (res.code == '0') {
                        this.trpage = res.list;
                    }
                })
            },
            listSchoolStu(pageNum){
                let params = {
                    schoolid: this.loginInfo.user.schoolId,
                    pageNum:pageNum
                };
                this.$api.Admin.pageAllStu(params).then(res => {
                    if (res.code == '0') {
                        this.stupage = res.list;
                    }
                })
            },
            handleDeleteTr(item) {
                let params = {
                    schoolid:this.loginInfo.user.schoolId,
                    acc:item.userCode
                };
                this.$confirm('确定将'+item.name + '删除吗？确定之后用户将并不能登录。', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                          this.$api.Admin.delTeacher(params).then(res => {
                              if (res.code == '0') {
                                  this.$message.success('删除成功！');
                                  this.listSchoolTr();
                              }
                          })
                      }).catch(() => {
                      });
            },

            handleDeleteStu(item) {
                let params = {
                    schoolid:this.loginInfo.user.schoolId,
                    acc:item.acc
                };
                console.log(params);
                this.$confirm('确定将'+item.name + '删除吗？确定之后用户将并不能登录。', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                          this.$api.Admin.delStudent(params).then(res => {
                              if (res.code == '0') {
                                  this.$message.success('删除成功！');
                                  this.listSchoolStu();
                              }
                          })
                      }).catch(() => {
                      });
            },

            beforeUpload(file){
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["xls","xlsx"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('导入模板应为xls/xlsx格式！');
                    return false;
                }
            },
            success(file){
                this.listSchoolTr();
                this.listSchoolStu();
            }
        }
    }
</script>

<style scoped lang="scss">
    .main {
        position: relative;
        height: 100%;
    }

    .posa {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        background-color: #fff;

        h3 {
            font-size: 18px;
        }

        .label {
            display: block;
            width: 76px;
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            font-size: 15px;
            margin-right: 10px;
        }
        .btn {
            // width: 120px;
            // height: 36px;
            // line-height: 36px;
            // background: #F3F4FB;
            // border: 1px solid #626BF1;
            // color: #626BF1;
            // border-radius: 10px;
            // cursor: pointer;
            // font-size: 16px;
            display: flex;
        }
    }

    .tab {
        padding: 0 85px;
    }
    .height {
        height: 100%;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .delete-btn {
        display: block;
        padding: 3px 5px;
        width: 64px;
        height: 24px;
        line-height: 24px;
        background: linear-gradient(-13deg, #F97762, #F89F9F);
        border-radius: 12px;
        color: #fff;
    }
</style>
